<template>
    <div>
        <el-col :md="24" :xs="24">
            <!-- 左边部分 -->
            <el-col :md="4" class="file-left">
                <input type="text" id="copyUrl" v-model="copyUrl" />
                <h3 class="transitionTextBg">二饭的云盘</h3>
                <el-col :md="24" class="file-left-function">
                    <el-col :md="24" class="file-left-function-item file-left-function-item" @click.native="loadFileList()" v-bind:class="{ 'file-left-checked' :checked==1}">
                        <img src="img/file.png" alt="文件">
                        文件
                    </el-col>
                    <el-col :md="24" class="file-left-function-item" @click.native="openSafe()" v-bind:class="{ 'file-left-checked' :checked==2}">
                        <img src="img/safe.png" alt="保险箱">
                        保险箱
                    </el-col>

                </el-col>

                <!-- 左侧下方内容 -->
                <el-col :md="24" class="file-left-bottom file-left-function">
                    <el-col :md="24" class="file-left-function-item">
                        <img src="img/upload.png" alt="上传文件">
                        上传文件
                        <form method="post" enctype="multipart/form- data" action="">
                            <input type="file" class="file-left-input" @change="uploadChange()" ref="inputer" multiple accept="image/png, image/jpeg, .zip, .pdf">
                        </form>
                    </el-col>
                    <el-col :md="24" class="file-left-function-item" @click.native="quit()">
                        <img src="img/exit.png" alt="文件">
                        退出系统
                    </el-col>
                </el-col>
            </el-col>

            <!-- 右边部分 -->
            <el-col :md="20" class="file-right">
                <el-col :md="24" class="file-right-dirPath"><span class="file-right-dirPath-parentDir" @click="gotoParent()">{{currentDir.parentName}}</span> {{currentDir.id!=1?'-':''}} {{currentDir.dirName}}</el-col>
                
                <el-col :md="24" class="file-right-file-main">
                    <!-- 标题 -->
                    <div>
                        <el-col :md="24" class="file-right-dirItem file-right-file-title">
                                <el-col :span="12" class="file-right-file-item-name">
                                    名称
                                </el-col>
                                <el-col :span="6" class="file-right-file-item-name">
                                    时间
                                </el-col>
                        </el-col>
                    </div>


                    <!-- 文件夹列表 -->
                    <div>
                        <el-col :md="24" class="file-right-dirItem file-right-file-item" v-for="(item,index) in dirs" :key="index" >
                                <el-col :span="12" class="file-right-file-item-name" @click.native="gotoDir(item.id)">
                                    <img src="img/files.png" alt="文件夹图标">
                                    {{item.dirName}}
                                </el-col>
                        </el-col>
                    </div>
                    
                    <!-- 文件列表 -->
                    <div>
                        <el-col :md="24" class="file-right-dirItem file-right-file-item" v-for="(item1,index1) in files" :key="index1" >
                                <el-col :span="12" class="file-right-file-item-name" @click.native="showFile(item1.newName)">
                                    <img src="img/file.png" alt="文件图标">
                                    {{item1.oldName}}
                                </el-col>
                                <el-col :span="6" class="file-right-file-item-time">
                                    {{item1.date}}
                                </el-col>
                                <el-col :span="6" class="file-right-file-item-operate">
                                    <el-col :md="4">
                                        <div class="file-right-file-item-operate-button" @click="onShareFile(item1.newName)" title="分享">
                                            <img src="img/share.png" alt="分享" >
                                        </div>
                                    </el-col>
                                    <el-col :md="4">
                                        <div class="file-right-file-item-operate-button" @click="onDelFile(item1.id)" title="删除">
                                            <img src="img/delete.png" alt="删除" >
                                        </div>
                                    </el-col>
                                    <el-col :md="4" v-if="checked==1">
                                        <div class="file-right-file-item-operate-button" @click="onSafe(item1.id)" title="放入保险箱">
                                            <img src="img/safe.png" alt="放入保险箱" >
                                        </div>
                                    </el-col>
                                    <el-col :md="4" v-if="checked==2">
                                        <div class="file-right-file-item-operate-button" @click="removeSafe(item1.id)" title="移出保险箱">
                                            <img src="img/safe.png" alt="移出保险箱" >
                                        </div>
                                    </el-col>
                                </el-col>
                        </el-col>
                    </div>
                    
                </el-col>
            </el-col>
        </el-col>
        
    </div>
</template>











<script>
export default {
    props: [
    ],
    data() {
        return {
            dir:1,
            dirs:[],
            files:[],
            currentDir:{},
            path:'',
            checked:1,
            copyUrl:'复制失败'
        }
    },

    methods:{
        quit(){
            this.$router.push('/index');
        },

        /**
         * 文件上传
         */
        uploadChange(){
            const that=this;
            let inputDOM = this.$refs.inputer;
            this.fil = inputDOM.files;
            
            let len=this.fil.length;// 文件个数
            if(len>1){
                this.$message({
                    message: '一次只能上传一个文件',
                    type: 'warning'
                });
                return;
            }
            let size = Math.floor(this.fil[0].size / 1024);// 文件大小
            if (size > 5*1024*1024) {
                this.$message({
                    message: '请选择5MB以内的文件',
                    type: 'warning'
                });
                return;
            }

            const fileType=['jpg','png','zip','pdf','md'];
            let name=this.fil[0].name; // 图片名字
            name=name.substring(name.lastIndexOf('.')+1);
            if(fileType.indexOf(name)==-1){
                this.$message({
                    message: '不支持该文件类型',
                    type: 'warning'
                });
                return;
            }

            let formData=new FormData();
            formData.append("file",this.fil[0]);
            formData.append("dir",that.dir);
            this.$axios({
                method: 'post',
                url: this.$url+`/api/file/fdfsUpload`,
                data: formData,
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(resp=>{
                if(resp.data.status.code==200){
                    that.$message({
                        message: '上传成功！',
                        type: 'success'
                    });
                }else{
                    that.$message({
                        message: resp.data.status.message,
                        type: 'error'
                    });
                }


                that.$refs.inputer.value = null;

                that.loadFileList();
            }).catch(function(){
                
                that.$message({
                    message: '该文件上传失败，请检查文件合法性！',
                    type: 'error'
                });
            })
        },

        /**
         *  根据当前目录加载文件内容 */
        loadFileList(){
            this.$root.loading=true;
            const that=this;
            this.$axios({
                method: 'get',
                url: this.$url+`/api/file/list?dir=`+that.dir
            }).then(res=>{
                this.files=res.data.data.files;
                this.files.forEach(e => {
                    e.date=new Date(e.date).toLocaleString();
                });
                this.dirs=res.data.data.dirs;
                this.path=res.data.data.path;
                this.currentDir=res.data.data.currentDir;
                this.checked=1;
                this.$root.loading=false;
            })
        },

        /**
         * 查看文件 */
        showFile(name){
            window.open(this.path+name)
            // window.location.href=this.path+name;
        },

        /**
         * 进入文件夹
         */
        gotoDir(id){
            this.$root.loading=true;
            this.dir=id;
            this.loadFileList();
        },

        /**
         * 进入上一级文件夹
         */
        gotoParent(){
            this.$root.loading=true;
            this.dir=this.currentDir.parentDir;
            this.loadFileList();
        },

        /**
         * 分享文件
         */
        onShareFile(fileName){
            this.copyUrl=this.path+fileName;
            setTimeout(() => {
                let input = document.getElementById('copyUrl');
                input.select();

            
                if(document.execCommand('copy')){
                    document.execCommand('copy');
                    this.$message({
                        message: '链接已经复制成功！',
                        type: 'success'
                    });
                    document.execCommand('copy');
                }else{
                    this.$message({
                        message: '链接复制失败！',
                        type: 'error'
                    });
                }
            }, 1000);

        },

        /**
         * 删除文件
         */
        onDelFile(fileId){
            let param={id:fileId};
            const that=this;
            this.$axios.delete(this.$url+'/api/file/delFile',{params:param}).then(function (resp) {
                console.log(resp.data.status.code);
                if(resp.data.status.code == 200){
                    that.$message({
                        message: resp.data.status.message,
                        type: 'success'
                    });
                    that.loadFileList();
                }else{
                    that.$message({
                        message: resp.data.status.message,
                        type: 'error'
                    });
                }
            })
        },

        /**
         * 加入到保险箱
         */
        onSafe(id){
            const that=this;
            this.$axios({
                method:'get',
                url:this.$url+'/api/file/addSafe/'+id,
            }).then(function(res){
                if(res.data.status.code == 200){
                    that.$message({
                        message: res.data.status.message,
                        type: 'success'
                    });
                    that.loadFileList();
                }else{
                    that.$message({
                        message: res.data.status.message,
                        type: 'error'
                    });
                }

            })
        },

        /**
         * 移除保险箱
         */
        removeSafe(id){
            const that=this;
            this.$axios({
                method:'get',
                url:this.$url+'/api/file/removeSafe/'+id,
            }).then(function(res){
                if(res.data.status.code == 200){
                    that.$message({
                        message: res.data.status.message,
                        type: 'success'
                    });
                    that.loadFileList();
                }else{
                    that.$message({
                        message: res.data.status.message,
                        type: 'error'
                    });
                }
            })
        },

        /**打开保险箱 */
        openSafe(){
            if(this.checked==2){
                return;
            }
            const that=this;
            this.$axios.get(this.$url+"/api/file/checkSafe").then(function (result) {
                if(result.data.status.code==203){
                    that.$prompt('请输入保险箱密码', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^[\w]{6,12}$/,
                        inputErrorMessage: '密码格式不正确'
                    }).then(({ value }) => {
                        let format=new FormData();
                        format.append("pwd",value);
                        that.$axios({
                            method:'post',
                            url:that.$url+'/api/file/openSafe',
                            data:format
                        }).then(function(res){
                            if(res.data.status.code == 200){
                                that.$message({
                                    message: res.data.status.message,
                                    type: 'success'
                                });
                                that.loadSafeData(res.data.data);
                            }else{
                                that.$message({
                                    message: res.data.status.message,
                                    type: 'error'
                                });
                            }
                        })

                    }).catch(() => {
                        that.$message({
                            type: 'info',
                            message: '取消输入'
                        });       
                    });
                }else if(result.data.status.code==200){
                    that.loadSafeData(result.data.data);
                }
            })
        },

        /**
         * 渲染保险箱数据
         */
        loadSafeData(data){
            this.checked=2;
            this.dirs=[];
            this.files=data.safeFiles;
            this.files.forEach(e => {
                e.date=new Date(e.date).toLocaleString();
            });
            this.currentDir.dirName='保险箱';
        }

    },
    created(){
        this.isLoading=true;
        this.loadFileList();
    }
};
</script>















<style lang="less" scope>
    #copyUrl{
        position: absolute;
        top: 0;
        opacity: 0;
    }
    .file-left{
        height: 100vh;
        background-color: #F5F5F3;
        padding-top: 5vh;
        font-family: inherit;
        position: relative;

        .file-left-function{
            padding: 5vh 1vw;

            .file-left-checked{
                background-color: #ECECEB;
            }

            .file-left-function-item{
                padding: 0 20px;
                border-radius: 8px;
                font-size: 14px;
                font-weight: 500;
                text-align: left;
                
                height: 40px;
                // line-height: 40px;   
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                position: relative;
                img{
                    width: 24px;
                    height: 24px;
                    margin-right: 15px;
                }
                .file-left-input{
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;
                    width: 100%;
                    height: 100%;
                }
                .file-left-input:hover{
                    cursor: pointer;
                }
            }
            
            .file-left-function-item:hover{
                background-color: #ECECEB;
                cursor: pointer;
            }
        }
        .file-left-bottom{
            
            position: absolute;
            bottom: 5vh;
            
        }
    }


    .file-right{
        height: 100vh;
        background-color: #FFFFFC;
        padding: 5vh 2vw;
        

        .file-right-dirPath{
            text-align: left;
            font-size: 16px;
            padding-bottom: 5vh;

            .file-right-dirPath-parentDir{
                color: #B0B1B1;
            }
            .file-right-dirPath-parentDir:hover{
                color: #868FFD;
                cursor: pointer;
            }
        }
        .file-right-file-main{
            padding:5px 0 5px 15px;

            .file-right-file-item{
                height: 40px;
                padding: 0 20px;
                font-size: 14px;
                border-top: 1px solid #F5F5F3;

                .file-right-file-item-name{
                    display: flex;
                    align-items: center;
                    height: 40px;
                    overflow: hidden;

                    img{
                        width: 18px;
                        height: 18px;
                        margin-right: 15px;
                    }
                }

                /**时间 */
                .file-right-file-item-time{
                    display: flex;
                    align-items: center;
                    height: 40px;
                    font-size: 12px;
                    color: gray;
                    overflow: hidden;
                }

                /**操作 */
                .file-right-file-item-operate{
                    align-items: center;
                    height: 40px;
                    overflow: hidden;
                    display: none;

                    .file-right-file-item-operate-button{
                        height: 20px;
                        width: 20px;

                        img{
                            height: 20px;
                            width: 20px;
                        }
                    }

                }

            }
            .file-right-file-title{
                color: gray;
                height: 40px;
                padding: 0 20px;
                font-size: 14px;
                border-top: 1px solid #F5F5F3;

                .file-right-file-item-name{
                    display: flex;
                    align-items: center;
                    height: 40px;

                    img{
                        width: 18px;
                        height: 18px;
                        margin-right: 15px;
                    }
                }
            }
            .file-right-file-item:hover{
                background-color: #ECECEB;
                border-radius: 8px;
                cursor: pointer;
            }

            .file-right-file-item:hover .file-right-file-item-operate{
                display: flex;
            }
        }
    }
</style>